<script setup lang="ts">
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';

const form = reactive({
  reason: '',
  result: '',
});
const emit = defineEmits(['submit']);
const submitForm = () => {
  if (form.reason || form.result) {
    // 这里可以进行表单数据的提交操作，比如发送到后端 API
    console.log('数据查询成功，数据为：', form);
    ElMessage.success('数据查询成功');
    emit('submit');
  } else {
    ElMessage.warning('请填写信息');
  }
};

</script>

<template>
    <div class="wrapper">
      <div class="form-area">
        <div>信息查询</div>
        <el-form class="form" :model="form" label-width="80px">
          <el-form-item label="故障原因">
            <el-input v-model="form.reason"></el-input>
          </el-form-item>
          <el-form-item label="故障结果">
            <el-input v-model="form.result"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn-run">
        执行<img src="../assets/right-arrow.svg" style="margin-left: 8px"  alt="right arrow"/>
      </div>
      <div class="form-area">
        <div>查询结果</div>
        <div>静安寺客服接待来访就爱看了解的风口浪尖</div>
      </div>
    </div>
    <div class="form-area graph">
      <div>图谱查询结果</div>
    </div>
</template>

<style scoped>
.wrapper {
  display: flex;
}
.form-area {
  flex: 1;
  padding: 8px;
  border: 1px dashed #1FC6FF;
  border-radius: 4px;
}
.form {
  margin: 8px 0;
}
.btn-run {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  background-image: url(../assets/run-bg.png);
  margin: 0 10px;
  cursor: pointer;
}
.graph {
  margin-top: 40px;
  height: 800px;
}
</style>
